<!-- 库存管理模态框 -->
<div class="modal-overlay" id="inventoryModalOverlay">
    <div class="modal inventory-modal">
        <!-- 模态框头部 -->
        <div class="modal-header">
            <h2 class="modal-title">库存管理</h2>
            <button class="modal-close" onclick="closeInventoryModal()">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body">
            <!-- 库存概览 -->
            <div class="inventory-overview">
                <div class="product-info-card">
                    <div class="product-basic-info">
                        <img src="../../../shared/assets/product-sample.jpg" alt="产品图片" class="product-image">
                        <div class="product-details">
                            <h3 class="product-name">桂林山水精品3日游</h3>
                            <div class="product-code">PRD202501001</div>
                            <div class="product-category">
                                <span class="category-tag">国内游</span>
                                <span class="destination-tag">华南线 / 广西</span>
                            </div>
                        </div>
                    </div>
                    <div class="inventory-stats">
                        <div class="stat-item">
                            <span class="stat-label">总库存</span>
                            <span class="stat-value primary">40</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">可售库存</span>
                            <span class="stat-value success">28</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">已售出</span>
                            <span class="stat-value">12</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">销售率</span>
                            <span class="stat-value">70%</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 库存管理标签页 -->
            <div class="inventory-tabs">
                <div class="tab-navigation">
                    <button class="tab-btn active" data-tab="current">当前库存</button>
                    <button class="tab-btn" data-tab="schedule">分期管理</button>
                    <button class="tab-btn" data-tab="settings">库存设置</button>
                    <button class="tab-btn" data-tab="history">变更记录</button>
                </div>

                <div class="tab-content">
                    <!-- 当前库存标签页 -->
                    <div class="tab-pane active" id="currentInventory">
                        <div class="current-inventory">
                            <div class="inventory-summary">
                                <div class="summary-card">
                                    <div class="summary-header">
                                        <h4 class="summary-title">库存状态</h4>
                                        <span class="status-badge warning">库存紧张</span>
                                    </div>
                                    <div class="summary-content">
                                        <div class="inventory-chart">
                                            <div class="chart-container">
                                                <div class="progress-ring">
                                                    <svg class="progress-svg" width="120" height="120">
                                                        <circle class="progress-background" cx="60" cy="60" r="50"></circle>
                                                        <circle class="progress-bar" cx="60" cy="60" r="50" 
                                                                stroke-dasharray="314" stroke-dashoffset="94"></circle>
                                                    </svg>
                                                    <div class="progress-text">
                                                        <div class="progress-percentage">70%</div>
                                                        <div class="progress-label">已售出</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="inventory-breakdown">
                                            <div class="breakdown-item">
                                                <div class="breakdown-color success"></div>
                                                <span class="breakdown-label">可售库存</span>
                                                <span class="breakdown-value">28</span>
                                            </div>
                                            <div class="breakdown-item">
                                                <div class="breakdown-color primary"></div>
                                                <span class="breakdown-label">预留库存</span>
                                                <span class="breakdown-value">5</span>
                                            </div>
                                            <div class="breakdown-item">
                                                <div class="breakdown-color secondary"></div>
                                                <span class="breakdown-label">已售出</span>
                                                <span class="breakdown-value">12</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="summary-card">
                                    <div class="summary-header">
                                        <h4 class="summary-title">库存调整</h4>
                                    </div>
                                    <div class="summary-content">
                                        <div class="adjustment-form">
                                            <div class="form-group">
                                                <label class="form-label">调整类型</label>
                                                <select class="form-select" id="adjustmentType">
                                                    <option value="increase">增加库存</option>
                                                    <option value="decrease">减少库存</option>
                                                    <option value="reserve">预留库存</option>
                                                    <option value="release">释放库存</option>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">调整数量</label>
                                                <input type="number" class="form-input" placeholder="请输入数量" min="1">
                                            </div>
                                            <div class="form-group">
                                                <label class="form-label">调整原因</label>
                                                <textarea class="form-textarea" rows="3" placeholder="请说明调整原因..."></textarea>
                                            </div>
                                            <button class="btn btn-primary btn-small">确认调整</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 分期管理标签页 -->
                    <div class="tab-pane" id="scheduleInventory">
                        <div class="schedule-inventory">
                            <div class="schedule-header">
                                <h4 class="section-title">分期库存管理</h4>
                                <button class="btn btn-outline btn-small" onclick="addSchedule()">
                                    <i class="fas fa-plus"></i>
                                    添加出团期
                                </button>
                            </div>
                            
                            <div class="schedule-list">
                                <div class="schedule-item active">
                                    <div class="schedule-info">
                                        <div class="schedule-date">
                                            <div class="date-main">2025年1月25日</div>
                                            <div class="date-day">周六</div>
                                        </div>
                                        <div class="schedule-details">
                                            <div class="detail-row">
                                                <span class="detail-label">库存数量:</span>
                                                <input type="number" class="inline-input" value="15" min="0">
                                            </div>
                                            <div class="detail-row">
                                                <span class="detail-label">最少成团:</span>
                                                <input type="number" class="inline-input" value="8" min="1">
                                            </div>
                                            <div class="detail-row">
                                                <span class="detail-label">状态:</span>
                                                <select class="inline-select">
                                                    <option value="active">正常销售</option>
                                                    <option value="full">即将满员</option>
                                                    <option value="sold_out">已满员</option>
                                                    <option value="cancelled">已取消</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="schedule-progress">
                                        <div class="progress-info">
                                            <span class="progress-current">7</span>
                                            <span class="progress-separator">/</span>
                                            <span class="progress-total">15</span>
                                        </div>
                                        <div class="progress-bar-container">
                                            <div class="progress-bar">
                                                <div class="progress-fill" style="width: 47%"></div>
                                            </div>
                                        </div>
                                        <div class="progress-status">
                                            <span class="status-badge success">正常销售</span>
                                        </div>
                                    </div>
                                    <div class="schedule-actions">
                                        <button class="btn-icon" title="编辑">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn-icon" title="复制">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                        <button class="btn-icon text-red" title="删除">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="schedule-item">
                                    <div class="schedule-info">
                                        <div class="schedule-date">
                                            <div class="date-main">2025年2月8日</div>
                                            <div class="date-day">周六</div>
                                        </div>
                                        <div class="schedule-details">
                                            <div class="detail-row">
                                                <span class="detail-label">库存数量:</span>
                                                <input type="number" class="inline-input" value="12" min="0">
                                            </div>
                                            <div class="detail-row">
                                                <span class="detail-label">最少成团:</span>
                                                <input type="number" class="inline-input" value="8" min="1">
                                            </div>
                                            <div class="detail-row">
                                                <span class="detail-label">状态:</span>
                                                <select class="inline-select">
                                                    <option value="active">正常销售</option>
                                                    <option value="full" selected>即将满员</option>
                                                    <option value="sold_out">已满员</option>
                                                    <option value="cancelled">已取消</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="schedule-progress">
                                        <div class="progress-info">
                                            <span class="progress-current">10</span>
                                            <span class="progress-separator">/</span>
                                            <span class="progress-total">12</span>
                                        </div>
                                        <div class="progress-bar-container">
                                            <div class="progress-bar">
                                                <div class="progress-fill warning" style="width: 83%"></div>
                                            </div>
                                        </div>
                                        <div class="progress-status">
                                            <span class="status-badge warning">即将满员</span>
                                        </div>
                                    </div>
                                    <div class="schedule-actions">
                                        <button class="btn-icon" title="编辑">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn-icon" title="复制">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                        <button class="btn-icon text-red" title="删除">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>

                                <div class="schedule-item">
                                    <div class="schedule-info">
                                        <div class="schedule-date">
                                            <div class="date-main">2025年2月15日</div>
                                            <div class="date-day">周六</div>
                                        </div>
                                        <div class="schedule-details">
                                            <div class="detail-row">
                                                <span class="detail-label">库存数量:</span>
                                                <input type="number" class="inline-input" value="18" min="0">
                                            </div>
                                            <div class="detail-row">
                                                <span class="detail-label">最少成团:</span>
                                                <input type="number" class="inline-input" value="8" min="1">
                                            </div>
                                            <div class="detail-row">
                                                <span class="detail-label">状态:</span>
                                                <select class="inline-select">
                                                    <option value="active" selected>正常销售</option>
                                                    <option value="full">即将满员</option>
                                                    <option value="sold_out">已满员</option>
                                                    <option value="cancelled">已取消</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="schedule-progress">
                                        <div class="progress-info">
                                            <span class="progress-current">3</span>
                                            <span class="progress-separator">/</span>
                                            <span class="progress-total">18</span>
                                        </div>
                                        <div class="progress-bar-container">
                                            <div class="progress-bar">
                                                <div class="progress-fill" style="width: 17%"></div>
                                            </div>
                                        </div>
                                        <div class="progress-status">
                                            <span class="status-badge success">正常销售</span>
                                        </div>
                                    </div>
                                    <div class="schedule-actions">
                                        <button class="btn-icon" title="编辑">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn-icon" title="复制">
                                            <i class="fas fa-copy"></i>
                                        </button>
                                        <button class="btn-icon text-red" title="删除">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 库存设置标签页 -->
                    <div class="tab-pane" id="inventorySettings">
                        <div class="inventory-settings">
                            <div class="settings-section">
                                <h4 class="section-title">基础设置</h4>
                                <div class="settings-grid">
                                    <div class="setting-item">
                                        <label class="form-label">是否限制库存</label>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="enableInventory" checked>
                                            <label for="enableInventory" class="toggle-label"></label>
                                        </div>
                                    </div>
                                    <div class="setting-item">
                                        <label class="form-label">总库存数量</label>
                                        <input type="number" class="form-input" value="40" min="0">
                                    </div>
                                    <div class="setting-item">
                                        <label class="form-label">最少成团人数</label>
                                        <input type="number" class="form-input" value="8" min="1">
                                    </div>
                                    <div class="setting-item">
                                        <label class="form-label">低库存预警</label>
                                        <input type="number" class="form-input" value="10" min="0">
                                    </div>
                                    <div class="setting-item">
                                        <label class="form-label">超售比例</label>
                                        <div class="input-group">
                                            <input type="number" class="form-input" value="10" min="0" max="50">
                                            <span class="input-suffix">%</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="settings-section">
                                <h4 class="section-title">自动化设置</h4>
                                <div class="automation-settings">
                                    <div class="setting-item">
                                        <div class="setting-info">
                                            <div class="setting-name">自动扣减库存</div>
                                            <div class="setting-desc">客户付款后自动扣减库存</div>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="autoDeduct" checked>
                                            <label for="autoDeduct" class="toggle-label"></label>
                                        </div>
                                    </div>
                                    <div class="setting-item">
                                        <div class="setting-info">
                                            <div class="setting-name">自动释放库存</div>
                                            <div class="setting-desc">客户取消后自动释放库存</div>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="autoRelease" checked>
                                            <label for="autoRelease" class="toggle-label"></label>
                                        </div>
                                    </div>
                                    <div class="setting-item">
                                        <div class="setting-info">
                                            <div class="setting-name">允许适度超售</div>
                                            <div class="setting-desc">在超售比例范围内允许超售</div>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="allowOversell">
                                            <label for="allowOversell" class="toggle-label"></label>
                                        </div>
                                    </div>
                                    <div class="setting-item">
                                        <div class="setting-info">
                                            <div class="setting-name">邮件通知</div>
                                            <div class="setting-desc">库存预警时发送邮件通知</div>
                                        </div>
                                        <div class="toggle-switch">
                                            <input type="checkbox" id="emailNotify" checked>
                                            <label for="emailNotify" class="toggle-label"></label>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="settings-section">
                                <h4 class="section-title">预警设置</h4>
                                <div class="alert-settings">
                                    <div class="form-group">
                                        <label class="form-label">预警接收人</label>
                                        <div class="recipient-list">
                                            <div class="recipient-item">
                                                <span class="recipient-name">张经理</span>
                                                <span class="recipient-email">zhang@example.com</span>
                                                <button class="btn-icon btn-small text-red">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                            <div class="recipient-item">
                                                <span class="recipient-name">李主管</span>
                                                <span class="recipient-email">li@example.com</span>
                                                <button class="btn-icon btn-small text-red">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <button class="btn btn-outline btn-small">
                                            <i class="fas fa-plus"></i>
                                            添加接收人
                                        </button>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label">通知方式</label>
                                        <div class="checkbox-group">
                                            <label class="checkbox-item">
                                                <input type="checkbox" checked>
                                                <span class="checkbox-label">系统提醒</span>
                                            </label>
                                            <label class="checkbox-item">
                                                <input type="checkbox" checked>
                                                <span class="checkbox-label">邮件通知</span>
                                            </label>
                                            <label class="checkbox-item">
                                                <input type="checkbox">
                                                <span class="checkbox-label">短信通知</span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 变更记录标签页 -->
                    <div class="tab-pane" id="inventoryHistory">
                        <div class="inventory-history">
                            <div class="history-header">
                                <h4 class="section-title">库存变更记录</h4>
                                <div class="history-filters">
                                    <select class="form-select filter-select">
                                        <option value="">全部类型</option>
                                        <option value="manual">手动调整</option>
                                        <option value="sale">销售扣减</option>
                                        <option value="cancel">取消释放</option>
                                        <option value="reserve">预留设置</option>
                                    </select>
                                    <input type="date" class="form-input filter-date">
                                </div>
                            </div>
                            
                            <div class="history-timeline">
                                <div class="timeline-item">
                                    <div class="timeline-marker sale"></div>
                                    <div class="timeline-content">
                                        <div class="timeline-header">
                                            <div class="timeline-title">销售扣减</div>
                                            <div class="timeline-time">2025-01-20 14:30</div>
                                        </div>
                                        <div class="timeline-details">
                                            <div class="change-info">
                                                <span class="change-before">库存: 30</span>
                                                <i class="fas fa-arrow-right"></i>
                                                <span class="change-after">库存: 28</span>
                                            </div>
                                            <div class="change-reason">客户王小明预订成功，订单号: ORD202501001</div>
                                            <div class="change-operator">操作人: 系统自动</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="timeline-item">
                                    <div class="timeline-marker manual"></div>
                                    <div class="timeline-content">
                                        <div class="timeline-header">
                                            <div class="timeline-title">手动调整</div>
                                            <div class="timeline-time">2025-01-19 10:15</div>
                                        </div>
                                        <div class="timeline-details">
                                            <div class="change-info">
                                                <span class="change-before">库存: 35</span>
                                                <i class="fas fa-arrow-right"></i>
                                                <span class="change-after">库存: 30</span>
                                            </div>
                                            <div class="change-reason">供应商通知住宿紧张，临时调减库存</div>
                                            <div class="change-operator">操作人: 张经理</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="timeline-item">
                                    <div class="timeline-marker reserve"></div>
                                    <div class="timeline-content">
                                        <div class="timeline-header">
                                            <div class="timeline-title">预留设置</div>
                                            <div class="timeline-time">2025-01-18 16:45</div>
                                        </div>
                                        <div class="timeline-details">
                                            <div class="change-info">
                                                <span class="change-before">预留: 0</span>
                                                <i class="fas fa-arrow-right"></i>
                                                <span class="change-after">预留: 5</span>
                                            </div>
                                            <div class="change-reason">为VIP客户预留库存</div>
                                            <div class="change-operator">操作人: 李主管</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="timeline-item">
                                    <div class="timeline-marker cancel"></div>
                                    <div class="timeline-content">
                                        <div class="timeline-header">
                                            <div class="timeline-title">取消释放</div>
                                            <div class="timeline-time">2025-01-17 09:20</div>
                                        </div>
                                        <div class="timeline-details">
                                            <div class="change-info">
                                                <span class="change-before">库存: 33</span>
                                                <i class="fas fa-arrow-right"></i>
                                                <span class="change-after">库存: 35</span>
                                            </div>
                                            <div class="change-reason">客户李女士取消预订，释放库存，订单号: ORD202501002</div>
                                            <div class="change-operator">操作人: 系统自动</div>
                                        </div>
                                    </div>
                                </div>

                                <div class="timeline-item">
                                    <div class="timeline-marker manual"></div>
                                    <div class="timeline-content">
                                        <div class="timeline-header">
                                            <div class="timeline-title">库存初始化</div>
                                            <div class="timeline-time">2025-01-15 08:00</div>
                                        </div>
                                        <div class="timeline-details">
                                            <div class="change-info">
                                                <span class="change-before">库存: 0</span>
                                                <i class="fas fa-arrow-right"></i>
                                                <span class="change-after">库存: 40</span>
                                            </div>
                                            <div class="change-reason">产品上架，初始化库存</div>
                                            <div class="change-operator">操作人: 产品经理</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 模态框底部 -->
        <div class="modal-footer">
            <button class="btn btn-outline" onclick="closeInventoryModal()">取消</button>
            <button class="btn btn-primary" onclick="saveInventorySettings()">保存设置</button>
        </div>
    </div>
</div>